<template>
    <div class="app-container">
        <div v-show="cabinet === null">
        <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <span style="font-size:1.1em">筛选条件</span>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <div class="grid-content bg-purple-light" style="float:right">
                    <el-button style="float:right" @click="fifterShow = !fifterShow" :icon="fifterShow?'arrow-up':'arrow-down'">{{fifterShow?'收起':'展开'}}</el-button>
                </div>
            </el-col>
        </el-row>
        <el-collapse-transition>
            <div v-show="fifterShow">
                <!-- 区域筛选 -->
                <area-addr :addrIds="fifterParams" :allSelectOpt="true"></area-addr>
                <el-form>
                    <el-row>
                        <el-col :span="6">
                            <el-col :span="21">
                                <el-form-item>
                                    <el-select v-model="fifterParams.roomId" placeholder="请选择机房" style="width:100%">
                                        <el-option v-for="list in roomListData" :key="list.roomId" :label="list.roomName" :value="list.roomId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="3">&nbsp</el-col>
                        </el-col>
                        <el-col :span="6">
                            <el-col class="line" :span="1">&nbsp</el-col>
                            <el-col :span="21">
                                <el-form-item>
                                    <el-select v-model="fifterParams.placeNum" placeholder="请选择机位数量" style="width:100%">
                                        <el-option label="全部" value="0"></el-option>
                                        <el-option label="36U" value="36"></el-option>
                                        <el-option label="42U" value="42"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">&nbsp</el-col>
                        </el-col>
                        <el-col :span="6">
                            <el-col class="line" :span="2">&nbsp</el-col>
                            <el-col :span="21">
                                <el-form-item>
                                    <el-select v-model="fifterParams.state" placeholder="请选择机柜状态" style="width:100%">
                                        <el-option label="全部" value="2"></el-option>
                                        <el-option label="使用中" value="1"></el-option>
                                        <el-option label="空闲" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="1">&nbsp</el-col>
                        </el-col>
                        <el-col :span="6">
                            <el-col class="line" :span="3">&nbsp</el-col>
                            <el-col :span="21">
                                <div class="grid-content bg-purple-light" style="float:right">
                                    <el-button type="warning" @click="getCabinetRoomInfos('all')">筛选</el-button>
                                </div>
                            </el-col>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-collapse-transition>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="9" :md="7" :lg="5">
                <div class="grid-content bg-purple">
                    <el-input v-model="fifterParams.cabinetCode" placeholder="请输入机柜编号"></el-input>
                </div>
            </el-col>
            <el-col :xs="8" :sm="5" :md="5" :lg="5">
                <div class="grid-content bg-purple-light">
                    <el-button type="primary" icon="search" @click="getCabinetRoomInfos('search')">搜索</el-button>
                </div>
            </el-col>
            <el-col :xs="16" :sm="10" :md="12" :lg="14">
                <div class="grid-content bg-purple-light" style="float:right">
                    <el-dropdown trigger="click" @command="cabinetDown" style="margin-right:12px">
                        <el-button>
                            导出
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="cabinetLists">导出列表</el-dropdown-item>
                            <el-dropdown-item command="cabinetTemplate">导出模版</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button @click="updataVisible=true">导入</el-button>
                    <el-button @click="createCabinet()">新增</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 机房信息表 -->
        <el-table :data="infos.pageData" border style="width: 100%;margin:20px 0">
            <el-table-column label="#" min-width="50px">
                <template scope="scope">
                    <span>{{ scope.$index+1+(pageConfig.curPage-1)*pageConfig.size }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地域" min-width="180px">
                <template scope="scope">
                    <span>{{ scope.row.areaName+'-'+scope.row.countryName+'-'+scope.row.provinceName+'-'+scope.row.cityName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="机房" min-width="130px">
                <template scope="scope">
                    <span>{{scope.row.roomName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="机柜编号" min-width="130px">
                <template scope="scope">
                    <span>{{ scope.row.cabinetCode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="机位数量" min-width="100px">
                <template scope="scope">
                    <span>{{ scope.row.placeNum }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" min-width="100px">
                <template scope="scope">
                    <span :class="scope.row.state==='1'?'infoColor':'silverColor'">{{ scope.row.state==0?'空闲':scope.row.state==1?'使用中':'全部' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="使用情况" min-width="100px">
                <template scope="scope">
                    <span>{{ scope.row.useNum.toString()+' / '+ scope.row.placeNum}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="240px">
                <template scope="scope">
                    <el-button size="small" type="success" @click="editCabinet(scope.row)">编辑</el-button>
                    <el-button size="small" type="info" @click="editEptRoom(scope.row)">落位图</el-button>
                    <el-button size="small" type="danger" @click="deleteConfirm(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="block">
            <el-pagination style="padding:0;" @current-change="handleCurrentChange" :current-page.sync="pageConfig.curPage" :page-size="pageConfig.size" layout="total, prev, pager, next, jumper" :total="pageConfig.total">
            </el-pagination>
        </div>
		</div>
        <!-- dialog编辑框 -->
        <el-dialog title="机柜信息" size="small" :visible.sync="cabinetEditVisible">
            <el-form :model="cabinetParams" style="margin-bottom:-30px" :rules="rules" ref="cabinetParams" v-if="cabinetEditVisible">
                <el-form-item label="机房" :label-width="formLabelWidth" prop="roomId">
                    <el-select v-model="cabinetParams.roomId" placeholder="请选择机房" :style="inputWidth">
                        <el-option v-for="list in roomListData" :key="list.roomId" :label="list.roomName" :value="list.roomId.toString()"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="机柜编号" :label-width="formLabelWidth" prop="cabinetCode">
                    <el-input v-model="cabinetParams.cabinetCode" auto-complete="off" :style="inputWidth" placeholder="请输入机柜编号"></el-input>
                </el-form-item>
                <el-form-item label="机位数量" :label-width="formLabelWidth" prop="placeNum">
                    <el-select v-model="cabinetParams.placeNum" placeholder="请选择机位数量" :style="inputWidth">
                        <el-option label="36U" value="36"></el-option>
                        <el-option label="42U" value="42"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="机柜状态" :label-width="formLabelWidth" prop="state">
                    <el-select v-model="cabinetParams.state" placeholder="请选择机柜状态" :style="inputWidth">
                        <el-option label="使用中" value="1"></el-option>
                        <el-option label="空闲" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cabinetEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('cabinetParams',cabinetParams.type)">确 定</el-button>
            </div>
        </el-dialog>
		<drop-bitmap v-if="cabinet !== null" v-on:back="cabinet = null" :cabinet="cabinet"></drop-bitmap>
        <!-- dialog编辑框 -->
        <el-dialog title="导入机柜信息" size="small" :visible.sync="updataVisible">
            <div v-if="updataVisible">
                <dropzone id="myVueDropzone" :url="uploadUrl" :acceptedFileTypes="'.xls'" @vdropzone-error="showError" @vdropzone-success="showSuccess" ref="submitFiles">
                    <!-- Optional parameters if any! -->
                    <input type="hidden" name="token" value="xxx">
                </dropzone>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updataVisible = false">取 消</el-button>
                <el-button type="info" @click="submitFiles">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.infoColor {
    color: #58B7FF
}

.silverColor {
    color: #8492A6
}
</style>
<script>
import AreaAddr from '@/components/Area-addr';
import Dropzone from '@/components/Drop-zone';
import DropBitmap from './dropBitmap.vue';
export default {
    components: {
        AreaAddr,
        Dropzone,
        DropBitmap
    },
    data() {
        return {
            fifterShow: false,
            // listLoading: true,
            inputWidth: { width: '96%' },
            cabinet: null,
            //筛选信息数据
            fifterParams: {
                areaId: '',
                countryId: '',
                provinceId: '',
                cityId: '',
                cabinetCode: '',
                roomId: '',
                placeNum: '',
                state: ''
            },
            formLabelWidth: '100px',
            // 模态框状态
            cabinetEditVisible: false,
            updataVisible: false,
            //机柜新建编辑信息
            cabinetParams: {
                cabinetId: '',
                cabinetCode: '',
                roomId: '',
                placeNum: '',
                state: '',
                type: ''
            },
            //select框下拉列表数据
            roomListData: [],
            // 页面机柜列表信息
            infos: {
                tableData: [],
                re_tableData: [],
                pageData: []
            },
            //分页配置
            pageConfig: {
                curPage: 1,
                total: null,
                size: 9,
            },
            rules: {
                roomId: [
                    { required: true, message: '请选择机房', trigger: 'change' }
                ],
                cabinetCode: [
                    { required: true, message: '请输入机柜编号', trigger: 'blur' }
                ],
                placeNum: [
                    { required: true, message: '请选择机位数量', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择机柜状态', trigger: 'change' }
                ]
            },
            uploadUrl: ''
        }
    },
    created() {
        // 当前页面table展示信息
        this.getCabinetRoomInfos('all');
        this.getRoomLists();
        this.uploadUrl = process.env.BASE_API + '/resman/cabinet/import';
        this.downloadUrl = process.env.BASE_API + '/resman/cabinet/export';
    },
    methods: {
        showSuccess(file, response, e) {
            this.showMessage('文件 ' + file.name + ' 上传成功!', 'success');
            this.getCabinetRoomInfos('all');
        },
        showError(file, error, xhr) {
            const h = this.$createElement;
            this.$msgbox({
                title: '警告',
                message: h('p', null, [
                    h('p', null, '文件 : ' + file.name + ' 上传失败 !'),
                    h('p', { style: 'color: red;margin-top:0.2em' }, '错误 : ' + error),
                ]),
                type: 'warning',
                confirmButtonText: '确定',
            })
        },
        submitFiles() {
            this.$refs.submitFiles.enqueueFiles();
        },
        //导出模板或者列表
        cabinetDown(command) {
            if (command === 'cabinetTemplate') {
                window.location.href=process.env.BASE_API + '/resman/cabinet/exporttemplate';
            } else {
                window.location.href=process.env.BASE_API + '/resman/cabinet/export';
            }
        },
        // 获取当前页面table展示信息
        getCabinetRoomInfos(type) {
            let are = this.fifterParams.areaId < 1 ? '0' : this.fifterParams.areaId;
            let cou = this.fifterParams.countryId < 1 ? '0' : this.fifterParams.countryId;
            let pro = this.fifterParams.provinceId < 1 ? '0' : this.fifterParams.provinceId;
            let cit = this.fifterParams.cityId < 1 ? '0' : this.fifterParams.cityId;
            let roo = this.fifterParams.roomId === '' ? '0' : this.fifterParams.roomId;
            let pla = this.fifterParams.placeNum === '' ? '0' : this.fifterParams.placeNum;
            let sta = this.fifterParams.state === '' ? '2' : this.fifterParams.state;
            this.listLoading = true;
            let _url = this.serverConfig.get('url') + '/resman/cabinet/list/' + are + '/' + cou + '/' + pro + '/' + cit + '/' + roo + '/' + pla + '/' + sta;
            this.$http.get(_url)
                .then((response) => {
                    if (response.code === 0) {
                        if (type === 'all') {
                            this.fifterParams.cabinetCode = '';
                            this.infos.tableData = this.infos.re_tableData = response.data;
                        } else {
                            this.infos.tableData = this.infos.re_tableData = response.data.filter(item => {
                                return item.cabinetCode.indexOf(this.fifterParams.cabinetCode) > -1
                            })
                        }
                        this.listLoading = false;
                        this.pageConfig.total = this.infos.re_tableData.length;
                        this.pageChange(this.pageConfig.curPage);
                    } else {
                        this.listLoading = false;
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    setTimeout(() => {
                        this.listLoading = false;
                    }, 400);
                    console.log(response)
                })
        },
        // 创建机房信息
        createCabinet() {
            this.resetForm();
            this.getRoomLists();
            this.cabinetParams.type = 'new';
            this.cabinetEditVisible = true;
        },
        // 编辑机房信息
        editCabinet(info) {
            this.resetForm();
            this.getRoomLists();
            this.cabinetParams = JSON.parse(JSON.stringify(info));
            this.cabinetEditVisible = true;
        },
        // 机房列表
        getRoomLists() {
            let _url = '/sys/room/list/0/0/0/0';
            this.$http.get(_url)
                .then((response) => {
                    if (response.code === 0) {
                        response.data.unshift({ roomId: '0', roomName: '全部' });
                        this.roomListData = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 机房信息提交
        submitForm(formName, type) {
            let _url = this.serverConfig.get('url');
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (type === 'new') {
                        _url += '/resman/cabinet/add';
                        this.$http.post(_url, this.cabinetParams)
                            .then((response) => {
                                if (response.code === 0) {
                                    this.cabinetEditVisible = false;
                                    this.getCabinetRoomInfos('all');
                                    this.showMessage('创建成功!', 'success');
                                } else {
                                    this.showWarning(response.msg, '创建失败');
                                }
                            }).catch((response) => {
                                console.log(response)
                            })
                    } else {
                        _url += '/resman/cabinet/update';
                        this.$http.put(_url, this.cabinetParams)
                            .then((response) => {
                                if (response.code === 0) {
                                    this.cabinetEditVisible = false;
                                    this.getCabinetRoomInfos('all');
                                    this.showMessage('修改成功!', 'success');
                                } else {
                                    this.showWarning(response.msg, '修改失败');
                                }
                            }).catch((response) => {
                                console.log(response)
                            })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 删除机房相关操作
        deleteConfirm(info) {
            const h = this.$createElement;
            this.$msgbox({
                title: '删除机柜信息',
                message: h('p', null, [
                    h('span', null, '是否删除 '),
                    h('span', { style: 'color: #20A0FF;font-size:1.2em;font-weight:bold' }, info.cabinetCode),
                    h('span', null, ' 这个机柜?'),
                ]),
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '删除中...';
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 100);
                        }, 300);
                    } else {
                        done();
                    }
                }
            }).then((action) => {
                if (action === 'confirm') {
                    this.cabinetDelete(info.cabinetId);
                } else {
                    showMessage('已取消删除', 'info');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        cabinetDelete(cabinetId) {
            let _url = '/resman/cabinet/delete/' + cabinetId;
            this.$http.delete(_url).then((response) => {
                if (response.code === 0) {
                    this.getCabinetRoomInfos('all');
                    this.showMessage('删除成功!', 'success');
                } else {
                    if (response.code === -1) {
                        console.log(response.statusText);
                    } else {
                        this.showWarning(response.msg, '删除失败');
                    }
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        // 分页按钮
        handleCurrentChange(val) {
            this.pageConfig.curPage = val;
            this.pageChange(val);
        },
        // 分页
        pageChange(page) {
            this.infos.pageData = this.infos.re_tableData.slice((page - 1) * this.pageConfig.size, page * this.pageConfig.size);
        },
        showMessage(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        },
        showWarning(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: '关闭',
                type: 'warning'
            });
        },
        // 初始化
        resetForm() {
            this.cabinetParams = {
                cabinetId: '',
                cabinetCode: '',
                roomId: '',
                placeNum: '',
                state: '',
            }
        },
       	editEptRoom(val){
        	this.cabinet = val;
        } 
    }
}
</script>
